<!doctype html>
<html style="height:100%">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../ui/layui/css/layui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont1.css"/>
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont2.css"/>
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont3.css"/>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
			body {
				font-family: STHeiti, "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
			}
			
			.center {
				position: relative;
				top: 50%;
				/*left: 50%;*/
				text-align: center;
				/*background:#393;
				color:#fff;*/
				transform: translate(-50%, -50%);
			}
			
			.paragraph {
				text-indent: 2em;
				letter-spacing: 3px;
				font-size: 19px;
				color: white;
				line-height: 25px;
			}
			
			::-webkit-scrollbar {
				width: 0;
			}
			
			.picture {
				text-align: center;
				width: 100%;
			}
			
			.picture img {
				max-width: 100%;
			}
			
			.picture video {
				max-width: 100%;
			}
			
			.div2 {
				height: 100%;
				width: 32%;
				background: #1f8589;
				float: left;
				padding: 20px;
				border-radius: 10px;
				margin: 0 1% 0 1%;
			}
			
			.div3 {
				height: 100%;
				width: 68%;
				/*background: #f2f2f2;*/
				float: left;
				padding: 20px;
				border-radius: 10px;
				margin: 0 1% 0 1%;
			}
			
			.div4 {
				/*background: red;*/
				height: 93%;
				width: 100%;
				overflow: auto;
			}
			
			#moocBox1 {
				height: 80%;
				width: 100%;
				/*margin-left: 25px;
				margin-top: 10px;*/
				overflow: hidden;
			}
			
			.aligncenter {
				clear: both;
				display: block;
				margin: auto;
			}
			
			.alignleft {
				display: inline;
				float: left;
				margin-top: 4%;
			}
			
			.alignleft1 {
				display: inline;
				float: left;
				margin-top: 5%;
				margin-left: 20px
			}
			
			.alignright {
				display: inline;
				float: right;
				margin-top: 8%;
				margin-right: 50px;
			}
			
			.teacherName {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.fontContent{
				font-family : iconfont1;
			}
			.fontTitle{
				font-family : iconfont3;
				font-weight: 900;
			}
			.fontTitle1{
				font-family : iconfont3;
				font-weight: 900;
				/*font-stretch: condensed;*/
			}
			.bg1 {
				/*padding-top: 12px;
				color: white;*/
				background: #0bb4c3 !important;
				/*height: 50px;
				font-size: 20px;
				padding-right: 20px;*/
			}
			
			.bg2 {
				/*padding-top: 12px;
				color: #e0ff00;*/
				background: #1f8589 !important;
				/*height: 50px;
				font-size: 20px;
				padding-right: 20px;*/
			}
		</style>
	</head>

	<body style="height: 100%;width: 100%;">
		<div class="mui-content" v-cloak style="height: 100%;background: linear-gradient(to bottom, #41bc10, #ffc048);" id="classCardMsg">
			<div v-cloak style="height: 12%;width: 100%;">
				<!--头像、学校、年级、班级信息-->
				<div class="" style="float:left;height: 100%;width: 60%;">
					<img v-if="cardMsgList.chname" class="alignleft" src="../../img/tianqi1.jpg" style="height: 70px;width: 70px;border-radius: 50%;object-fit: cover;margin-left: 7%;float: left;">
					<div v-if="cardMsgList.chname" class="alignleft1" style="float: left;">
						<p class="mui-pull-left fontTitle1" style="font-size: 50px;color: #fff;font-weight: 900;">{{cardMsgList.schname}} {{cardMsgList.gradename}} {{cardMsgList.classname}}</p>
					</div>
				</div>
				<!--时间-->
				<div class="" style="float:left;height: 100%;width: 40%;">
					<p class="alignright fontTitle" style="font-size: 24px;color: #fff;height: 100%;">{{timeModel.yearStr}} {{timeModel.weekStr}} {{timeModel.hoursStr}}</p>
				</div>
			</div>
			<div style="height: 85%;width: 100%;">
				<div class="" style="padding: 20px 20px 20px 20px;width: 100%;height: 100%;">
					<div class="" style="float:left;height: 100%;width: 3%;"></div>
					<div class="" style="float:left;height: 100%;width: 94%;background: #20d0b0;border-radius: 12px;">
						<div class="" style="height: 10%;width: 100%;">
							<div style="text-align: center;height: 8%;width: 100%;">
								<img src="../../img/page1/biaoti.png" style="margin: -22px 0 0;width: 300px;" />
							</div>
							<div class="fontTitle" style="height: 6%;text-align: center;width: 100%;color: white;font-size: 25px;margin-top: -5px;">{{cardMsgList.chname}}</div>
						</div>
						<div class="" style="height: 88%;width: 100%;">
							<div class="" style="float:left;height: 100%;width: 2%;"></div>
							<div class="" style="float:left;height: 100%;width: 35%;background: #1f8589;border-radius: 12px;">
								<div class="div4" v-if="cardMsgList.newslist&&cardMsgList.newslist.length>0">
									<div class="" style="height: 20%;width: 100%;">
										<img class="mui-media-object mui-pull-left" style="width: 80px;height: 80px;border-radius: 50%;object-fit: cover;margin-left: 30px;margin-top: 30px;border-width: 3px;border-style:solid;border-color: white;" :src=currentModel.imgurl>
										<!--<div class="mui-media-body" style="color: white;font-size: 20px;padding-top: 60px;padding-left: 140px;">
											{{currentModel.topic}}
										</div>-->
										<div class="mui-media-body teacherName fontTitle" style="color: white;font-size: 20px;padding-top: 50px;padding-left: 20px;">{{currentModel.topic}}</div>
									</div>
									<div class="fontContent" v-if="cardMsgList.newslist" id="" style="height: 80%;width: 100%;padding: 15px;" v-html="currentModel.content">
									</div>
								</div>
							</div>
							<div class="" style="float:left;height: 100%;width: 2%;"></div>
							<div class="" style="float:left;height: 100%;width: 59%;">
								<ul v-if="cardMsgListSum.chname" class="mui-table-view mui-grid-view mui-grid-9" style="background: #20d0b0;border: 0px; height: 100%;width: 100%;overflow: scroll;">
									<li @click="clickLi(cardModel)" class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 fontTitle" style="border: 0px;border-radius: 6px;width: 23%;margin-left: 2%;height: 40%;margin-bottom: 20px;" v-for="(cardModel,index) in cardMsgListSum.newslist" :class="(currentModel.newsid==cardModel.newsid)?'bg2':'bg1'">
										<img class="mui-icon" style="width: 90%;height: 80%;border-radius: 5px;object-fit: cover;" :src=cardModel.imgurl />
										<div class="mui-media-body teacherName" style="color: #fff;text-align: center;margin-top: 20px;height: 30px;">
											<span style="text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;">
													{{cardModel.topic}}
												</span>
										</div>
									</li>
								</ul>
							</div>
							<div class="" style="float:left;height: 100%;width: 2%;"></div>
						</div>
					</div>
					<div class="" style="float:left;height: 100%;width: 3%;"></div>
				</div>
			</div>
			<div style="height: 3%;width: 100%;"></div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../ui/layui/layui.js"></script>
		<script src="../../js/jquery-1.8.3.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
		<script type="text/javascript" src="../../js/json2xml.js"></script>
		<script type="text/javascript" src="../../js/xml2json.js"></script>

		<script src='../../js/utils/vue.min.js'></script>
		<script src="../../js/storageKeyName.js"></script>
		<script src="../../js/utils/store.js"></script>
		<script src="../../js/utils/utils.js"></script>
		<script src="../../js/utils/events.js"></script>
		<script src="../../js/lib/vconsole/vconsole.min.js"></script>
		<script src="../../js/publicProtocol.js"></script>
		<script type="text/javascript">
			mui.init();
			var curPage;
			var myScroll2;

			function scrollUp1() {

				var area = document.getElementById('moocBox1');
				var con1 = document.getElementById('con11');
				var con2 = document.getElementById('con21');
				// console.log('1111111:' + area.scrollTop + ',' + con1.scrollHeight);
				if(area.scrollTop >= con1.scrollHeight) {
					area.scrollTop = 0;
				} else {
					area.scrollTop++; //向上滚动
				}
			}
			window.onload = function() {
				curPage = utils.getDataFromUrl(window.location.href);
				// console.log('curPage:' + JSON.stringify(curPage));
				setInterval("getTime()", 1000);
				// 班主任
//				getlist(2, curPage.chncode, 1, 1);
				//任课老师
				getlist(2, curPage.chncode, 100, 2);
			}
			//flag,文章种类，0文章列表,1带图片的文章列表,2带详情
			//chncode,栏目代码，后台栏目定义的代码
			//pageSize,每页条数
			function getlist(flag, chncode, pageSize, tempFlag) {
				var publicPar = store.get(window.storageKeyName.PUBLICPARAMETER);
				var personal = store.get(window.storageKeyName.PERSONALINFO);
				var newsType;
				if (publicPar.blandlv == 0) {//0是班级班牌
					newsType = 0;
				} else if (publicPar.blandlv == 1) {//1是年级牌
					newsType = 1;
				} else if (publicPar.blandlv == 2) {//2是学校牌
					newsType = 2;
				}
				//握手
				var enData0 = {};
				//不需要加密的数据
				var comData0 = {
					// uuid: publicPar.uuid, //用户设备号
					newstype: flag, //文章种类，0文章列表,1带图片的文章列表,2带详情
					chncode: chncode, //栏目代码，后台栏目定义的代码
					blandid: publicPar.blandid, //班牌对应ID，根据班牌类型填写,学校的填写学校ID,年级牌,填写年级ID,班级牌填写班级ID
					blandlv: publicPar.blandlv, //班牌类型，0是班级班牌,1是年级牌,2是学校牌,控制blandid的值指向
					//					blandid: 20, //班牌对应ID，根据班牌类型填写,学校的填写学校ID,年级牌,填写年级ID,班级牌填写班级ID
					//					blandlv: 1, //班牌类型
					psize: pageSize, //每页条数
					pindex: 1, //页码
					newslv: newsType, //文章层级，文章层级,0获取blandlv对应的本层级的文章,1获取向上级别的文章(如年级牌只获取该年级的及学校级别的文章),2获取关联范围的所有文章(如年级,则获取该年级下所有班级及学校级别的及本年级的)
					// utoken: personal.utoken, //用户令牌
					// appid: publicPar.appid //系统所分配的应用ID
				};
				//			events.showWaiting();
				//发送网络请求，data为网络返回值
				postDataEncry(window.storageKeyName.INTERFACE_BANPAI+'api/webSchNews/ClassNewsList', enData0, comData0, 1, function(data) {
					console.log('2121212tempFlag:' + JSON.stringify(data));
					if(data.code == 0) {
						for (var i = 0; i < data.data.newslist.length; i++) {
							var tep = data.data.newslist[i];
							if (tep.imgurl == null) {
								tep.imgurl = '../../img/body.png';
							}
						}
						if(tempFlag == 1) {
							classCardMsg.cardMsgList = data.data;
							//							setTimeout(function() {
							//								var area = document.getElementById('moocBox1');
							//								var con1 = document.getElementById('con11');
							//								var con2 = document.getElementById('con21');
							//								var speed = 50;
							//								area.scrollTop = 0;
							//								con2.innerHTML = con1.innerHTML;
							//								window.clearInterval(myScroll2);
							//								myScroll2 = setInterval("scrollUp1()", speed);
							//							}, 300);
						} else if(tempFlag == 2) {
							if (data.data.newslist.length>0) {
								// console.log('122222222222222');
								classCardMsg.cardMsgList = data.data;
								classCardMsg.currentModel = data.data.newslist[0];
//								data.data.newslist.splice(0, 1);
//								data.data.newslist = data.data.newslist.shift();
								classCardMsg.cardMsgListSum = data.data;
							}
						}
					} else {

					}
				});
			}
			var classCardMsg = new Vue({
				el: "#classCardMsg",
				data: {
					cardMsgList: {},
					currentModel:{},
					timeModel: {},
					cardMsgListSum: {}
				},
				methods: {
					clickLi: function(model) {
						classCardMsg.currentModel = model;
					}
				}
			});

			function getDetail() {
				var publicPar = store.get(window.storageKeyName.PUBLICPARAMETER);
				// console.log('publicPar:' + JSON.stringify(publicPar));
				var personal = store.get(window.storageKeyName.PERSONALINFO);
				// console.log('personal0002:' + JSON.stringify(personal));
				//握手
				var enData0 = {};
				//不需要加密的数据
				var comData0 = {
					uuid: publicPar.uuid, //用户设备号
					newsid: 1, //文章种类，0文章列表,1带图片的文章列表
					utoken: personal.utoken, //用户令牌
					appid: publicPar.appid //系统所分配的应用ID
				};
				//			events.showWaiting();
				//发送网络请求，data为网络返回值
				postDataEncry('ClassNews', enData0, comData0, 0, function(data) {
					// console.log('2121212');
					if(data.code == 0) {} else {

					}
				});
			}

			function getTime() {
				var date = new Date(); //创建对象  
				var y = date.getFullYear(); //获取年份  
				var m = date.getMonth() + 1; //获取月份  返回0-11  
				var d = date.getDate(); // 获取日  
				var w = date.getDay(); //获取星期几  返回0-6   (0=星期天) 
				var ww = ' 星期' + '日一二三四五六'.charAt(new Date().getDay()); //星期几
				var h = date.getHours(); //时
				var minute = date.getMinutes() //分
				var s = date.getSeconds(); //秒
				var sss = date.getMilliseconds(); //毫秒
				if(m < 10) {
					m = "0" + m;
				}
				if(d < 10) {
					d = "0" + d;
				}
				if(h < 10) {
					h = "0" + h;
				}
				if(minute < 10) {
					minute = "0" + minute;
				}
				if(s < 10) {
					s = "0" + s;
				}
				if(sss < 10) {
					sss = "00" + sss;
				} else if(sss < 100) {
					sss = "0" + sss;
				}
				var tmpModel = {
					yearStr: y + "-" + m + "-" + d + "",
					weekStr: ww,
					hoursStr: h + ":" + minute + ":" + s
				}
				classCardMsg.timeModel = tmpModel;
			}
		</script>
	</body>

</html>